<template>
  <div class="v-chart" :ref="id"></div>
</template>

<script>
import * as echarts from 'echarts';
import { onMounted, getCurrentInstance, ref } from 'vue';
import { uuid } from '@/utils';
export default {
	props : {
		options : {
			type : Object,
			default : () => ({}),
		},
	},
	setup (ctx) {
		let id = ref(`v-chart-${uuid()}`);
		let vecharts = null;
		let init = () => {
			vecharts.setOption(ctx.options);
		};

		onMounted(() => {
			if (ctx.options) {
				vecharts = echarts.init(getCurrentInstance().ctx.$refs[id.value]);
				init();
			}
		});
		return {
			id,
			init
		};
	},
};
</script>

<style lang="scss" scoped>
.v-chart {
	width: 100%;
	height: 100%;
}</style>
